<template>
  <div class="similar-mv">
    <h3 class="title">{{ title }}</h3>
    <div class="wrap">
      <div class="similar-info" 
        v-for="(item,index) in data" 
        :key="index"
        @click="itemClick(item,index)">
        <img class="item-img" v-lazy="item.cover ? item.cover : item.coverUrl" alt="">
        <span>{{ item.name ? item.name : item.title }}</span>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    props:{
      data:Array,
      title:String,
    },

    inject: ['reload'],

    data() {
      return {
        singerName:'',
        SingerId:'',
        videoName:'',
      }
    },

    methods:{
      itemClick(item,index){
        let itemId = item.id;
        if(typeof(itemId) == 'number'){
          let singerInfo = item.artists
          this.videoName = item.name;
          if(singerInfo.length == 1){
            this.singerName = singerInfo[0].name;
            this.SingerId = singerInfo[0].id;
          }else{
            this.SingerId = singerInfo[0].id;
            let singername = [];
            singerInfo.forEach((element) => {
              singername.push(element.name);
            });
            this.singerName = singername.join();
          }
          this.$session.setItem('singerid',this.SingerId);
          this.$session.setItem('singername',this.singerName);
          this.$session.setItem('videoname',this.videoName);
          this.$router.push({path:'/playmv/'+item.id});
        }
        else{
          this.$router.push({path:'/playvideo/'+ item.vid});
        }

        this.reload();
      }
    }
  }
</script>

<style scoped>
.similar-mv {
  width: 100%;
  margin: auto;
}

.title{
  /* padding: 10px; */
  height: 40px;
  line-height: 40px;
  margin-left: 3vw;
}

.wrap{
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}

.similar-info{
  width: 30%;
  display: inline-block;
  margin-bottom: 15px;
  height: auto;
  flex: 0 0 30%;
  font-size: 14px;
  padding: 0 5px 0 5px;
}

.item-img{
  width: 100%;
  border-radius: 5px;
  color: rgb(80, 80, 80);
}
</style>